<template>
  <el-dialog
    class="dialogModel"
    title="应用管理新增"
    :visible.sync="dialogAppVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-card class="box-card el-card-flex dialogCard">
      <div slot="header" class="clearfix">
        <el-input clearable v-model="appName" placeholder="请搜索..." style="width: 210px; float: right" @keyup.enter.native="appOptionsEvent" @clear="appOptionsEvent">
          <el-button slot="append" icon="el-icon-search" @click="appOptionsEvent"></el-button>
        </el-input>
      </div>
      <div class="text item checkbox">
        <el-checkbox-group v-model="checkedApp">
          <el-checkbox class="appCheckbox" border v-for="item in appOptions" :label="item.appId" :key="item.appId">
            <div class='inner-text'>
              <span :title="item.appName">{{item.appName}}</span>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCheck(true)">
        确定
        <i class="el-icon-document-checked el-icon--right"></i>
      </el-button>
      <el-button @click="handleCheck(false)">
        取消
        <i class="el-icon-refresh-left"></i>
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Dialog, Table, TableColumn, MessageBox, Message, TabPane, Collapse, CollapseItem, Tag } from 'element-ui'
import { getAppAuth, tieUserGroupDataAuth } from '@/api/authority/userAuthorization/userAuthorization.js'
// const appOptions = ['秦皇岛应用', '三重一大应用', '集团双创系统', 'OA系统']
export default {
  props: ['dialogAppVisible', 'dialogGroup', 'orgDate'],
  data () {
    return {
      checkedApp: [],
      appOptions: [],
      authIds: [],
      appName: '' // 搜索model值
			// searchData: '' // 存储搜索来的数据
      // checkedApps: appOptions
    }
  },
  mounted() {
    this.appOptionsEvent()
  },
  methods: {
    // 新增获取所有的应用名称数据
    appOptionsEvent() {
      getAppAuth(this.appName).then(res => {
        // console.log(res)
        this.appOptions = res.data.data
      })
    },
    // // 回车事件
    // searchTabeleEnter() {
    //   this.searchTabel()
    // },
		// 搜索事件
		// searchTabel () {
		// 	if (this.appName) { // 有数据,是要搜索
		// 		this.searchData = this.appName
		// 		this.appOptionsEvent({ appName: this.searchData })
		// 	} else { // 搜索输入框是空的,说明是要重置,不搜索了,展示正常的全部数据
		// 		this.searchData = ''
		// 		this.appOptionsEvent()
		// 	}
		// },
    // 弹框关闭提示框
    handleClose () {
      // MessageBox.confirm('确认要关闭弹框吗？')
      //   .then(() => {
          this.checkedApp = []
          this.$emit('dialogHideApp', false)
          this.appName = ''
				  this.appOptionsEvent()
        // })
        // .catch(() => {})
    },
    // 弹框点击按钮
    handleCheck (result) {
      if (!result) {
        return this.handleClose()
      } else {
        let authIds = []
        this.orgDate.forEach(v => authIds.push(v.roleId))
        this.checkedApp.forEach(v => {
          let isRepeace = false
          for (let i = 0; i < this.orgDate.length; i++) {
            if (this.orgDate[i].roleId === v) {
              isRepeace = true
              break
            }
          }
          if (!isRepeace) authIds.push(v)
        })
        tieUserGroupDataAuth({
          authIds: authIds,
          id: this.dialogGroup,
          type: 'e1bcb98e15bd42cfa69839657ae7bb93'
        }).then(res => {
          if (res.data.code === 10000) {
            Message.success('新增成功')
            this.$emit('getCheckoutAppData', this.checkedApp)
            this.appName = ''
				    this.appOptionsEvent()
          }
        })
        this.checkedApp = []
        return this.$emit('dialogHideApp', false)
      }
    }
  },
  components: {
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
		'el-table-column': TableColumn, // 表格列
		'el-tab-pane': TabPane, // 标签页
		'el-collapse': Collapse, // 折叠面板
		'el-collapse-item': CollapseItem, // 折叠面板列
		'el-tag': Tag // 标签
  },
}
</script>
<style lang="scss">
.dialogModel{
  .el-dialog{
    .el-dialog__body{
      padding: 0px 20px 60px;
    }
  }
}
.dialogCard{
  border: none;
  box-shadow: none;
  .el-card__header{
    border-bottom: none;
  }
  .el-card__body{
    .text.item{
      padding: 0;
    }
  }
  .checkbox{
    .el-checkbox {
      margin: 6px 0 6px 10px;
    }
  }
}
.dialogCard.is-always-shadow{
  -webkit-box-shadow: none; 
  box-shadow: none;
}
.appCheckbox {
  width: 242px!important;
  height: 100px!important;
  padding: 15px 15px 5px 10px!important;
  border-radius: 4px!important;
  .el-checkbox__inner {
    height: 14px !important;
    width: 14px !important;
  }
  .inner-text {
    position: relative;
    top: 28px;
    right: 28px;
    span {
      width: 180px;
      display: block;
      font-size: 14px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      margin-left: 38px;
    }
  }
}
</style>